<template>
    <fieldset>    
        <legend>混入</legend>
        <h1>{{msg}}</h1>
        <h1>{{age}}</h1>
        <button @click="handleClick">点击</button>
    </fieldset>
</template>
<script>

    // 定义一个可以被混入的对象
    let mixObj ={//编写组件的选项
        data(){
            return {
                msg:"混入对象的msg",
                age:22
            }
        },
        methods:{
            handleClick(){
                console.log("这是混入对象的handleClick");
            },
            log(){
                alert("混入对象的log")
            }
        },
        mounted () {
            console.log("这是混入对象的mounted");
        }
    }
    //通过组件的mixins这个属性来进行混入
    //合并策略
    //1,如果混入了data属性，会对data进行递归合并,冲突的时候，以组件的属性优先
    //2,同名的钩子函数会被合并为一个数组，都会进行调用，会以混入的函数优先
    //3,组件选项，比如methods，directives，components，filters...都会被合并为一个对象，冲突的时候以组件的键值对为主
    export default {
        mixins:[mixObj],//混入
        
        data(){
            return{
                msg:"组件的选项"
            }
        },
        methods:{
            handleClick(){
                console.log("组件的方法");
            }
        },
        mounted(){//钩子函数 挂载之后
            console.log("这是组件的mounted钩子函数");
            console.log(this);
        }
    }
</script>